<template>
  <div class="chart-container"></div>
</template>

<script>
export default {
  name: "demoTwenty3",
  filters: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
      //this.findFm()
      // this.findIndexFm()
      //this.filterFm()
     this.reduceFm()

  },
  methods: {
    reduceFm(){
          var arr = [3,9,4,3,6,0,9];
          var sum = arr.reduce(function (prev, cur) {
              return prev + cur;
          },0);
          console.log(sum)

    },
     filterFm(){
           let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
           let res = nums.filter((num) => {
            return num > 5;
           });

          console.log(res);  // [6, 7, 8, 9, 10]

     },
     findFm(){
            // 定义一个需要被查找的数组
            var memoList = [{
                    id: 1, name: '1'
                  },{
                    id: 2, name: '2'
                  },{
                    id: 3, name: '3'
             }]

            // 用 editItem 变量将 查找出来的数据进行接收
            var editItem = memoList.find((ele) => {
                          return ele.id == 2 
               })  
              console.log(editItem)
            // 打印 editItem 得到的结果是 {id: 2, name: '2'}
     },
      findIndexFm(){
            var memoList = [{
                    id: 1, name: '1'
                  },{
                    id: 2, name: '2'
                  },{
                    id: 3, name: '3'
             }]

            var editItem = memoList.findIndex((val)=>val.name==3)
              console.log(editItem)

              const nameArr=[
                {id:1,userName:"zhaoqian",age:27},
                {id:2,userName:"sunli",age:23},
                {id:3,userName:"zhouwu",age:25 },
                {id:4,userName:"zhengwang",age:21}
            ];
            var i1=nameArr.findIndex((value)=>value.age==25);
            console.log(i1);


           
     },

    


  }
};
</script>

<style >
/*
    定宽高 
    1.绝对定位和负magin值
    2.绝对定位 + transform
    3.flex布局

     不定宽高 
      1.绝对定位 + transform
      2.flex布局

*/
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}

/* .box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}
 */
</style>
